<template>
    <div class="animation-list flex-row">
        <div class="animation-item flex-col" v-for="item,i in animations" :key="i" @mouseover="onMouseOver(i)" @mouseleave="onMouseLeave()">
            <div class="cover" :style="{backgroundImage:`url(${getAnimationImageUrl(item)})`}">
                <div class="mask flex-row-center" v-if="i===currentOverIndex">
                    <div class="flex-col-center" @click="onPictureCardPreview(item)">
                        <el-icon><CirclePlusFilled /></el-icon>
                        <div class="mask-item">查看</div>
                    </div>
                    <div class="flex-col-center" @click="handleRemove(item)">
                        <el-icon><DeleteFilled /></el-icon>
                        <div class="mask-item">删除</div>
                    </div>
                </div>
            </div>
            <div class="name">{{item.name}}</div>
        </div>
    </div>
    <el-dialog v-model="dialogVisible" width="500" title="警告">
      <span>确定要删除动画吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSureRemovePicture">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue'
import { CirclePlusFilled, DeleteFilled } from '@element-plus/icons-vue'
export default defineComponent({
    name: 'AnimationList',
    props:{
        animations:Array
    },
    components:{
        DeleteFilled,
        CirclePlusFilled
    },
    emits:['PictureCardPreview','removePicture'],
    setup(props, ctx) {
        const baseUrl=process.env.VUE_APP_BASE_API
        const dialogVisible = ref(false)
        const currentOverIndex=ref(-1)
        const getAnimationImageUrl=(item:any):string=>{
            let str=''
            for(let i=0;i<item.digits;i++){
                str+='0'
            }
            str+=item.start
            str=str.substring(str.length-item.digits)
            return baseUrl+item.path+str+item.ext
        }
        const onMouseOver=(index:number)=>{
            //console.log(index)
            currentOverIndex.value=index
        }
        const onMouseLeave=()=>{
            currentOverIndex.value=-1
        }
        const onPictureCardPreview=(item:any)=>{
            ctx.emit('PictureCardPreview',item)
        }
        //当前要删除的图片
        let picItem:any
        const handleRemove=(item:any)=>{
          picItem=item
          //ctx.emit('removePicture',item)
          dialogVisible.value=true
        }
        const onSureRemovePicture=()=>{
          dialogVisible.value=false
          ctx.emit('removePicture',picItem)
        }
        return {
            dialogVisible,
            currentOverIndex,
            onMouseOver,
            onMouseLeave,
            handleRemove,
            onPictureCardPreview,
            getAnimationImageUrl,
            onSureRemovePicture
        }
    }
})
</script>
<style lang="scss" scoped>
.animation-list{
    flex-wrap: wrap;
    .animation-item{
        padding: 8px;
        .cover{
            width: 100px;
            height: 100px;
            background-image: url(../assets/images/icon/动画icon.png);
            background-size:contain;
            .mask{
                background-color: rgba(0, 0, 0, 0.479);
                height: 100%;
                color: white;
                font-size: 14px;
                gap: 10px;
                el-icon{
                    font-size: large;
                }
                .mask-item{
                    font-size: 12px;
                }
            }
        }
        .name{
            text-align: center;
        }
        :hover{
          cursor: pointer;
        }
    }
}
</style>